<template  >
    <div style="height: 100%;" class="tabbar">
            <router-view class="routerBox"></router-view>
        <van-tabbar v-model="active" active-color="#ee0a24">
            <van-tabbar-item @click="$router.push('/home/home')" name="home" icon="wap-home-o">首页</van-tabbar-item>
            <van-tabbar-item @click="$router.push('/home/type')" name="classification" icon="apps-o">分类</van-tabbar-item>
            <van-tabbar-item @click="$router.push('/home/videos')" name="video" icon="tv-o">视频</van-tabbar-item>
            <van-tabbar-item @click="$router.push('/home/cart')" name="shopping" icon="shopping-cart-o">购物车</van-tabbar-item>
            <van-tabbar-item @click="$router.push('/home/me')" name="personal" icon="contact">个人中心</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
        export default {
            data() {
                return {
                    active: 'home', 
                };
            }, 
        };
</script> 
<style lang="less" scoped>
    // 引入全局样式
    @import "../../style/index.less";
        .tabbar{  
            height: 100%;
                .routerBox{
                    height: calc(100% - 50px);
                }
            }
</style>
